@mixin fx-swap-left($namespace: emb) {
  ##{$namespace} .swapleft {
    -webkit-transform: perspective(800);
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: ease-out;
  }

  ##{$namespace} .swapleft.in {
    -webkit-animation-name: swapLeftIn;
  }

  ##{$namespace} .swapleft.out {
    -webkit-animation-name: swapLeftOut;
  }

  @-webkit-keyframes swapLeftIn {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, -800px) rotateY(-70deg);
    }

    35% {
      opacity: 1;
      -webkit-transform: translate3d(180px, 0, -400px) rotateY(-20deg);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
    }
  }

  @-webkit-keyframes swapLeftOut {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
    }

    35% {
      opacity: 0.5;
      -webkit-transform: translate3d(-180px, 0, -400px) rotateY(20deg);
    }

    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, -800px) rotateY(70deg);
    }
  }
}
